<template>
  <i v-if="iconType == 'el'" :class="classInfo" @click="handleClick"></i>
  <i v-else-if="iconType == 'iconfont'" :class="classInfo" @click="handleClick"></i>
  <!-- 备注 -->
  <svg-icon
    v-else
    :class="classInfo"
    :icon-class="iconClassVm"
    @mouseenter.native="isHover = true"
    @mouseout.native="isHover = false"
    @click.native="handleClick"
  />
</template>

<script>
export default {
  name: "ScIcon",
  props: {
    /** 是否打开备注模式 */
    isSelected: {
      type: Boolean,
      default: false
    },
    /**
     * 图标样式
     * @example
     * el-icon-phone
     * @example
     * email
     */
    iconClass: {
      type: String
    },
    iconClassHover: {
      type: String
    },
    disabled: {
      type: Boolean
    }
  },
  data() {
    return {
      isHover: false
    };
  },
  computed: {
    iconType() {
      if (!this.iconClassVm) {
        return "el";
      }

      if (this.iconClassVm.startsWith("el-")) {
        return "el";
      }
      //todo 特殊操作，文件夹图标
      if (this.iconClass.startsWith("folder-icon")) {
        return "el";
      }
      if(this.iconClassVm.startsWith('iconfont')){
        return "iconfont"
      }
      return "svg";
    },
    iconClassVm() {
      if (this.isSelected) {
        return this.iconClassHover || this.iconClass;
      }
      if (this.isHover) {
        return this.iconClassHover || this.iconClass;
      }
      return this.iconClass;
    },
    /** 标签的样式 */
    classInfo() {
      const result = ["sc-icon"];
      if (this.iconType == "el" || this.iconType == "iconfont") {
        // i 标签的图标和样式都是在class中
        result.push(this.iconClassVm);
      }
      if (this.disabled) {
        result.push("disabled");
      }
      return result;
    }
  },
  methods: {
    handleClick(e) {
      if (this.disabled) {
        return;
      }
      this.$emit("click", e);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.disabled {
  color: $disableText !important;
  cursor: not-allowed;
}
.rotate90 {
  transform: rotate(90deg);
}
</style>
